<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>蟹壹品卡券提货系统</title>
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/change.css">
	<link rel="stylesheet" href="./css/mobiscroll-2.13.2.full.min.css">
</head>
<body>
	<!-- 兑换券信息-->
	<div class="back"></div>
	<div class="backline"></div>
	<div class="status">
		<div class="take"> 
			<span class="round-first"></span> 
			<span class="round-second"></span> 
			<span>提货券信息</span>
			<div class="clearfix"></div>
		</div>
		<div class="result-info result-info-border">
			<p>卡号：<span class="usercard"></span></p>
		</div>
		<div class="result-info">
			<p>密码：<span class="userpaasword"></span></p>
		</div>
	</div>
	<!-- 可兑换商品 -->
	<div class="change-crab">
		<div class="change-title">
			<p>可兑换商品</p>
			<img src="./image/crab.png">	
		</div>
		<div class="change-carblist">
			<div class="crablist"></div>
		</div>
	</div>
	<!-- 收货人信息 -->
	<div class="gain">
		<div class="gain-info"> 
			<span class="round-first"></span> 
			<span class="round-second"></span> 
			<span>收货人信息</span>
		</div>
		<div class="gain-total">
			<div class="gain-list">
				<div>
					<label for="username">收货人</label>
					<div>
						<input type="text" name="username" placeholder="请输入收货人姓名" maxlength="10" id="username">
					</div>
					<div class="clearfix"></div>
				</div> 
				<div>
					<label for="usertel">电话</label>
					<div>
						<input type="text" name="usertel" placeholder="联系电话" maxlength="11" id="usertel">
					</div>
					<div class="clearfix"></div>
				</div> 
				<div>
					<label for="province">省份</label>
					<div>
						<input type="text" name="province" readonly placeholder="请选择" id="province">
						<img src="./image/more.png">
					</div>
					<div class="clearfix"></div>
				</div> 
				<div>
					<label for="city">城市</label>
					<div>
						<input type="text" name="city" readonly placeholder="请选择" id="city">
						<img src="./image/more.png">
					</div>
					<div class="clearfix"></div>
				</div> 
				<div>
					<label for="area">区域</label>
					<div>
						<input type="text" name="area" readonly placeholder="请选择" id="area">
						<img src="./image/more.png">
					</div>
					<div class="clearfix"></div>
				</div> 
				<div class="note">
					<p>详细地址</p>
					<textarea maxlength="30" placeholder="最多30字" name="detailadd" id="detailadd"></textarea>
				</div>
				<div>
					<label for="wantdate">期望收货时间</label>
					<div>
						<input type="text" name="wantdate" readonly placeholder="请选择" id="wantdate">
						<img src="./image/more.png">
					</div>
					<div class="clearfix"></div>
				</div> 
				<div class="note">
					<p>备注信息</p>
					<textarea maxlength="30" placeholder="最多30字" name="note" id="note"></textarea>
				</div>
			</div>
			<div><span class="warning"></span></div>
			<div class="refer">
				<img src="./image/submit.png">
			</div>
		</div>
	</div>
	<!-- 弹出信息框 -->
	<div class="sure show">
		<div class="sure-content">
			<div class="sure-title">
				<img src="./image/crab.png">
				<span>请确认收货信息</span>
				<i></i>
				<i></i>
			</div>
			<div class="sure-list">
				<div>
					<div class="surelisttitle">收货人</div>
					<div class="surelistusername"></div>
					<div class="clearfix"></div>
				</div>
				<div>
					<div class="surelisttitle">联系方式</div>
					<div class="surelistusertel"></div>
					<div class="clearfix"></div>
				</div>
				<div>
					<div class="surelisttitle">收件地址</div>
					<div class="surelistaddress"></div>
					<div class="clearfix"></div>
				</div>
				<div>
					<div class="surelisttitle">期望时间</div>
					<div class="surelistwantdate"></div>
					<div class="clearfix"></div>
				</div>
				<div>
					<div class="surelisttitle">备注信息</div>
					<div class="surelistnote"></div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="sureimg">
			<img src="./image/sure.png" class="imgsure">
			<img src="./image/cancel.png" class="imgcancel">
			<div class="clearfix"></div>
		</div>
	</div>
	<ul id="provincelist" class="show"></ul>
	<ul id="citylist"  class="show"></ul>
	<ul id="countrylist"  class="show"></ul>
</body>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/mobiscroll-2.13.2.full.min.js"></script>
	<script type="text/javascript" src="./js/change.js"></script>
</html>